<template>
  <n-popover
    trigger="hover"
    class="biu-popover"
    :style="style"
    :placement="placement">
    <template #trigger>
      <slot></slot>
    </template>
    {{ content }}
  </n-popover>
</template>

<script lang="ts" setup>
import { type FollowerPlacement } from "vueuc"
import { useThemeStore } from "@/stores/theme"
import { computed } from "vue"

defineProps({
  content: {
    type: String,
    required: true
  },
  placement: {
    type: String as () => FollowerPlacement,
    required: false,
    default: "top"
  }
})

const themeType = useThemeStore().getThemeType()

const style = computed(() => {
  return {
    "--biu-popover-color": themeType.value === "dark" ?"#fff":"#000",
    "--biu-popover-background": themeType.value === "dark" ?"rgba(100, 100, 100, 0.55)":"rgba(255, 255, 255, 0.55)"
  }
})
</script>

<style lang="scss">

.biu-popover {
  font-size: 0.13rem;
  padding: 0.03rem 0.1rem !important;
  background: var(--biu-popover-background) !important;
  backdrop-filter: blur(11px) !important;
  -webkit-backdrop-filter: blur(11px) !important;
  color: var(--biu-popover-color) !important;

  .n-popover-arrow {
    background: var(--biu-popover-background) !important;
    backdrop-filter: blur(11px) !important;
    -webkit-backdrop-filter: blur(11px) !important;
  }
}
</style>
